<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Positional Audio Example — Networked-Aframe</title>
    <meta name="description" content="Positional Audio Example — Networked-Aframe" />

    <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.min.js"></script>
    <script src="/easyrtc/easyrtc.js"></script>
    <script src="/dist/networked-aframe.js"></script>
    <script>
      // see issue https://github.com/networked-aframe/networked-aframe/issues/267
      NAF.schemas.getComponentsOriginal = NAF.schemas.getComponents;
      NAF.schemas.getComponents = (template) => {
        if (!NAF.schemas.hasTemplate('#avatar-template')) {
          NAF.schemas.add({
            template: '#avatar-template',
            components: [
              {
                component: 'position',
                requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.001)
              },
              {
                component: 'rotation',
                requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.5)
              },
              {
                selector: '.head',
                component: 'material',
                property: 'color'
              }
            ]
          });
        }
        const components = NAF.schemas.getComponentsOriginal(template);
        return components;
      };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/aframe-randomizer-components@3.0.2/dist/aframe-randomizer-components.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aframe-environment-component@1.5.0/dist/aframe-environment-component.min.js"></script>
    <script src="/js/spawn-in-circle.component.js"></script>
    <script src="/js/dynamic-room.component.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
  </head>
  <body>
    <a-scene dynamic-room>
      <a-assets>
        <!-- Templates -->

        <!-- Avatar -->
        <template id="avatar-template">
          <a-entity class="avatar" networked-audio-source>
            <a-sphere class="head" scale="0.45 0.5 0.4"></a-sphere>
            <a-entity class="face" position="0 0.05 0">
              <a-sphere class="eye" color="#efefef" position="0.16 0.1 -0.35" scale="0.12 0.12 0.12">
                <a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
              </a-sphere>
              <a-sphere class="eye" color="#efefef" position="-0.16 0.1 -0.35" scale="0.12 0.12 0.12">
                <a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
              </a-sphere>
            </a-entity>
          </a-entity>
        </template>

        <!-- /Templates -->
      </a-assets>

      <a-entity id="rig">
        <a-entity
          id="player"
          networked="template:#avatar-template;attachTemplateToLocal:false;"
          camera
          position="0 1.6 0"
          spawn-in-circle="radius:3"
          wasd-controls
          look-controls
        >
          <a-sphere class="head" visible="false" random-color></a-sphere>
        </a-entity>
      </a-entity>

      <a-entity environment="preset:arches"></a-entity>
    </a-scene>

    <div class="actions">
      <button id="mic-btn" type="button" class="button">Mute Mic</button>
    </div>

    <script>
      // Mic status
      let micEnabled = true;
      // Mic button element
      const micBtnEle = document.getElementById('mic-btn');
      const params = new URLSearchParams(location.search);
      const audio = params.get('audio');
      if (audio !== 'true') {
        micBtnEle.style.display = 'none';
      }

      // Called by Networked-Aframe when connected to server
      function onConnect() {
        console.log('onConnect', new Date());

        // Handle mic button click (Mute and Unmute)
        micBtnEle.addEventListener('click', function () {
          NAF.connection.adapter.enableMicrophone(!micEnabled);
          micEnabled = !micEnabled;
          micBtnEle.textContent = micEnabled ? 'Mute Mic' : 'Unmute Mic';
        });
      }
    </script>
  </body>
</html>
